<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Styles</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="../../stylesheet.css" type="text/css" rel="stylesheet"/>
<link href="../../page_styles1.css" type="text/css" rel="stylesheet"/>

  


<link href="../../calibreHtmlOutBasicCss.css" type="text/css" rel="stylesheet" />

</head>
<body>

<div class="calibreMeta">
  <div class="calibreMetaTitle">
  
  
    
    <h1>
      <a href="../../../index.html">Sigil User Guide
</a>
    </h1>
    
    
  
  </div>
  <div class="calibreMetaAuthor">
    0.7.2

  </div>
</div>

<div class="calibreMain">

  <div class="calibreEbookContent">
    
      <div class="calibreEbNavTop">
        
          <a href="links.html" class="calibreAPrev">previous page</a>
        

        
          <a href="indexes.html" class="calibreANext"> next page</a>
        
      </div>
    

    
  <h2 id="styles" class="calibre5">Styles</h2>

  <p class="h2subheading">— Working with Stylesheets —</p>

  <p class="calibre1">EPUB editing is all about styles. Sigil provides very easy to use but powerful tools for helping you work with stylesheets.</p>

  <p class="calibre1">Styles can be inserted in your individual HTML files, but the usual approach is to define a stylesheet containing your styles and then link that file to your HTML files.</p>

  <div class="image"><img alt="styles-tab" src="../Images/styles-tab.png" class="calibre7"/></div>

  <h3 class="sigilnotintoc">Creating Stylesheets</h3>

  <p class="calibre1">To create a stylesheet, just use <span class="shortcut">File→Add→Blank Stylesheet</span>. Then just add the style definitions you want to use. Or add an existing stylesheet file (such as a template you use often) to the EPUB.</p>

  <div class="tip">
    <p class="tiptext">Do not include spaces in your stylesheet filename.</p>
  </div>

  <h3 class="sigilnotintoc">Linking Stylesheets</h3>

  <p class="calibre1">You can easily link your stylesheets to your HTML files by right-clicking on them in the Book Browser and selecting <span class="shortcut">Link Stylesheets</span> then choosing which stylesheet to link or unlink.</p>

  <div class="image"><img alt="book-browser-link-stylesheets" src="../Images/book-browser-link-stylesheets.png" class="calibre7"/></div>

  <h3 class="sigilnotintoc">Navigating Styles</h3>

  <p class="calibre1">You can quickly jump to the definition of a style being used by your HTML code.</p>

  <p class="calibre1">While in Code View hold the <span class="shortcut">Ctrl</span> key down and click on an HTML tag, or select the menu item <span class="shortcut">Search→Go To Link Or Style</span> or its keyboard shortcut. You will immediately be taken to the exact location of the style used for the HTML tag you are in – if one exists.</p>

  <p class="calibre1">To return to where you were, just click the Back button <img alt="" src="../Images/back-to-link-style_22px.png" class="calibre7"/> or select the menu item <span class="shortcut">Go Back to Link or Style</span> or its keyboard shortcut.</p>

  <h3 class="sigilnotintoc">Deleting Styles</h3>

  <p class="calibre1">You can select the menu item <span class="shortcut">Tools→Delete Unused Stylesheet Classes</span> to automatically delete any unused classes in stylesheets. Sigil will present you a list of class names in your stylesheets that do not have any references to them from your HTML files and then allow you to confirm or cancel deleting them.</p>

  <div class="image"><img alt="styles-delete-styles" src="../Images/styles-delete-styles.png" class="calibre7"/></div>

  <div class="tip">
    <p class="tiptext">While Sigil makes several checks to ensure the style is not used, if a particular complicated CSS declaration is used it may list the tag incorrectly so you should check the styles carefully.</p>

    <p class="tiptext">You can double-click on a style to show that style in the CSS stylesheet.</p>
  </div>

  <h3 class="sigilnotintoc">Context Menu and Formatting Styles</h3>

  <p class="calibre1">The context menu for a stylesheet allows you to re-format your stylesheet:</p>

  <ul class="calibre3">
    <li class="calibre4"><span class="listheading">Clips:</span> Select a clip to enter into your stylesheet.</li>

    <li class="calibre4"><span class="listheading">Add To Clips:</span> Add the selected text to Clips.</li>

    <li class="calibre4"><span class="listheading">Go To Link Or Style:</span> Not used.</li>

    <li class="calibre4"><span class="listheading">Reformat CSS</span></li>

    <li class="calibre4">
      <ul class="calibre6">
        <li class="calibre4"><span class="listheading">Multiple Lines Per Style:</span> Arrange the styles with over multiple lines with spacing.</li>

        <li class="calibre4"><span class="listheading">Single Lines Per Style:</span> Arrange each style on one line.</li>
      </ul>
    </li>
  </ul>

  <p class="calibre1">Although most stylesheets are formatted with multiple lines per style, the single lines per style would look like this:</p>

  <div class="image"><img alt="styles-single-line" src="../Images/styles-single-line.png" class="calibre7"/></div>

  <h3 class="sigilnotintoc">Viewing Styles</h3>

  <p class="calibre1">You can use the menu item <span class="shortcut">Tools→Reports</span> to show a list of reports about your styles – see the <a href="../Text/reports.html">Reports</a> chapter.</p>

  <p class="calibre1">For more control over deleting individual classes, you can use a report to view the number of times a class is used and then delete the ones you want.</p>



  </div>

  
  <div class="calibreToc">
    <h2><a href="../../../index.html"> Table of contents</a></h2>
     <div>
  <ul>
    <li>
      <a href="cover_picture.html">Cover</a>
    </li>
    <li>
      <a href="titlepage.html">Title Page</a>
    </li>
    <li>
      <a href="rights.html">Copyright</a>
    </li>
    <li>
      <a href="introduction.html">Introduction</a>
      <ul>
        <li>
          <a href="whats_new.html">What’s New</a>
        </li>
        <li>
          <a href="about_sigil.html">About Sigil</a>
        </li>
        <li>
          <a href="about_epub.html">About EPUB</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="installation.html">Installation</a>
    </li>
    <li>
      <a href="features.html">Features</a>
      <ul>
        <li>
          <a href="user_interface.html">User Interface</a>
        </li>
        <li>
          <a href="preferences.html">Preferences</a>
        </li>
        <li>
          <a href="opening_and_saving_files.html">Opening and Saving Files</a>
        </li>
        <li>
          <a href="book_view.html">Book View</a>
        </li>
        <li>
          <a href="code_view.html">Code View</a>
        </li>
        <li>
          <a href="preview.html">Preview</a>
        </li>
        <li>
          <a href="book_browser.html">Book Browser</a>
        </li>
        <li>
          <a href="metadata.html">Metadata</a>
        </li>
        <li>
          <a href="add_cover.html">Add Cover</a>
        </li>
        <li>
          <a href="table_of_contents.html">Table of Contents</a>
        </li>
        <li>
          <a href="validation.html">Validation</a>
        </li>
        <li>
          <a href="spellcheck.html">Spellcheck</a>
        </li>
        <li>
          <a href="media_files.html">Images, Video, Audio</a>
        </li>
        <li>
          <a href="special_characters.html">Special Characters</a>
        </li>
        <li>
          <a href="splitting_and_merging.html">Splitting and Merging</a>
        </li>
        <li>
          <a href="find_replace.html">Find &amp; Replace</a>
        </li>
        <li>
          <a href="saved_searches.html">Saved Searches</a>
        </li>
        <li>
          <a href="clips.html">Clips</a>
        </li>
        <li>
          <a href="clipboard_history.html">Clipboard History</a>
        </li>
        <li>
          <a href="links.html">Links and IDs</a>
        </li>
        <li>
          <a href="styles.html">Styles</a>
        </li>
        <li>
          <a href="indexes.html">Indexes</a>
        </li>
        <li>
          <a href="reports.html">Reports</a>
        </li>
        <li>
          <a href="external_editors.html">External Editors</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="tutorials.html">Tutorials</a>
      <ul>
        <li>
          <a href="tutorial_getting_started_with_epub.html">Getting Started With EPUB</a>
        </li>
        <li>
          <a href="tutorial_convert_to_html.html">Prepare Your File For Sigil</a>
        </li>
        <li>
          <a href="tutorial_load_file.html">Open Your File With Sigil</a>
        </li>
        <li>
          <a href="tutorial_save.html">Save Your EPUB File</a>
        </li>
        <li>
          <a href="tutorial_metadata.html">Add the Author and Title</a>
        </li>
        <li>
          <a href="tutorial_add_cover.html">Add a Cover Image</a>
        </li>
        <li>
          <a href="tutorial_split.html">Create Files For Each Chapter</a>
        </li>
        <li>
          <a href="tutorial_mark_chapters.html">Identify Your Chapters</a>
        </li>
        <li>
          <a href="tutorial_generate_toc.html">Generate A Table of Contents</a>
        </li>
        <li>
          <a href="tutorial_links.html">Create Links and Notes</a>
        </li>
        <li>
          <a href="tutorial_code_view.html">A Quick Introduction To Code View</a>
        </li>
        <li>
          <a href="tutorial_spelling.html">Check For Spelling Mistakes</a>
        </li>
        <li>
          <a href="tutorial_validate.html">Check For Errors In Your EPUB</a>
        </li>
        <li>
          <a href="tutorial_find_replace.html">Edit With Find &amp; Replace</a>
        </li>
        <li>
          <a href="tutorial_stylesheets.html">Use Stylesheets</a>
        </li>
        <li>
          <a href="tutorial_embed_fonts.html">Include Custom Fonts</a>
        </li>
        <li>
          <a href="tutorial_advanced_find.html">Advanced Find &amp; Replace – Regex</a>
        </li>
        <li>
          <a href="tutorial_regex_reference.html">Regular Expression Reference</a>
        </li>
        <li>
          <a href="tutorial_tips.html">Tips</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="faq.html">FAQ</a>
      <ul>
        <li>
          <a href="faq.html#faq_common_questions">Common Questions</a>
        </li>
        <li>
          <a href="faq.html#faq_questions">Where to Get Help</a>
        </li>
        <li>
          <a href="faq.html#faq_using_sigil">Using Sigil</a>
        </li>
        <li>
          <a href="faq.html#faq_formatting">Formatting and Styles</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="contributing_to_sigil.html">Contributing to Sigil</a>
    </li>
  </ul>
</div>


  </div>
  

  <div class="calibreEbNav">
    
      <a href="links.html" class="calibreAPrev">previous page</a>
    

    <a href="../../../index.html" class="calibreAHome"> start</a>

    
      <a href="indexes.html" class="calibreANext"> next page</a>
    
  </div>

</div>

</body>
</html>
